<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <!-- import CSS -->
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>
<body>
  <div id="app">
    <template>
        <div>
            <el-card>
                <!-- 新增角色按钮 -->
                <el-row :gutter="20">
                    <el-col :span="2">
                        <el-button type="primary" icon="el-icon-circle-plus-outline" @click="compile(2)">新增用户</el-button>
                    </el-col>
                </el-row>
                <!-- 表格显示 -->
                <template>
                    <el-table
                            :data="tableData"
                            style="width: 100%; padding-top: 40px;">
                        <el-table-column
                                prop="username"
                                label="用户名"
                                width="180">
                        </el-table-column>

                        <el-table-column
                                prop="password"
                                label="密码"
                                width="180">
                        </el-table-column>
                        <el-table-column
                                prop="id"
                                label="ID"
                                width="100">
                        </el-table-column>
<!--                        <el-table-column-->
<!--                            prop="phone"-->
<!--                            label="电话"-->
<!--                            width="200">-->
<!--                        </el-table-column>-->
<!--                        <el-table-column-->
<!--                            prop="emile"-->
<!--                            label="邮箱"-->
<!--                            width="200">-->
<!--                        </el-table-column>-->
                        <el-table-column
                            prop="loginTime"
                            label="创建日期"
                            width="180">
                        </el-table-column>

                        <el-table-column
                                prop="status"
                                label="状态"
                                width="100">
                            <template slot-scope="scope">
                                <span>{{ scope.row.start == '0' ? '禁用' : '启用' }}</span>
                            </template>
                        </el-table-column>

                        <el-table-column
                                prop="operate"
                                label="操作"
                                width="260">
                            <template slot-scope="scope">
                                <el-button type="text" @click="compile(1)">编辑</el-button>
                                <!-- <el-button type="text" @click="modify(scope.row.id)">编辑</el-button> -->
                                <el-button type="text" @click="open(scope.row.id)">删除</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                    <!-- 弹框 -->
                    <el-dialog
                        title="用户"
                        :visible.sync="dialogVisible"
                        width="50%"
                        :before-close="handleClose">
                        <template>
                            <el-input v-model="form.name" id="sss" placeholder="用户名" style="width: 350px;"></el-input>
                            <el-input v-model="form.nickName" placeholder="昵称" style="width: 350px;"></el-input>
<!--                            <el-input v-model="form.phone" placeholder="电话" style="width: 350px;margin-top: 20px;"></el-input>-->
<!--                            <el-input v-model="form.emile" placeholder="邮箱" style="width: 350px;margin-top: 20px;"></el-input>-->
                            <span>角色:</span>
                            <template>
                                <div style="margin: 15px 0;"></div>
                                <el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange">
                                  <el-checkbox v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox>
                                </el-checkbox-group>
                            </template>

                            <br/>
<!--                            <span>性别:</span>-->
<!--                            <template>-->
<!--                                <el-radio v-model="form.sex" label="1" style="margin-top: 20px;">男</el-radio>-->
<!--                                <el-radio v-model="form.sex" label="2">女</el-radio>-->
<!--                            </template>-->
                            <br/>

                            <span>状态:</span>
                            <template>
                                <el-radio v-model="form.start" label="1" style="margin-top: 20px;">启用</el-radio>
                                <el-radio v-model="form.start" label="2">禁用</el-radio>
                            </template>

                        </template>
                        <span slot="footer" class="dialog-footer">
                            <el-button @click="cancel">取 消</el-button>
                            <el-button type="primary" @click="confirm">确 定</el-button>
                        </span>
                    </el-dialog>
                </template>
            </el-card>
        </div>
    </template>
  </div>
</body>
  <!-- import Vue before Element -->
  <script src="https://unpkg.com/vue@2/dist/vue.js"></script>
  <!-- import JavaScript -->
  <script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script src="../../data/axios-0.18.0.js"></script>
  <script>
    const cityOptions = ['管理员', '审核人员', '批量处理人员'];
    new Vue({
      el: '#app',
      data: function() {
        return {
            tableData: [{//表格
                "name":"admin",
                "nickName":"张三",
                "sex":"男",
                "phone":10086,
                "createDate":"2023/06/25",
                "emile":"@10086.com",
                "start":1
            },{"name":"root"}],
            dialogVisible: false,//弹框
            form:{
                name:'',
                nickName:'',
                phone:'',
                emile:'',
                sex: '1',//性别
                start: '1'
            },
            checkedCities: [],
            cities: cityOptions,
            // input: '',//编辑

        }
      },created() {
        this.init()
      },
      methods:{
        handleClose(done) {
            this.$confirm('确认关闭？')
            .then(_ => {
                done();
            })
            .catch(_ => {});
        },
        open(id) {
            this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                // 这里是删除
                var adminId= id
                alert(adminId)
                axios({
                    method: "post",
                    url: "/Delete/DeleteManagement?adminId="+id
                }).then(sss => {
                    console.log(sss.data)
                    this.tableData=sss.data
                })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });
        },
        confirm(){//确定
            alert("这里是增加")
            this.dialogVisible = false
        },
        cancel(){//取消
            this.dialogVisible = false

        },
        compile(temp){//编辑
            this.dialogVisible = true
            console.log(temp);
        },
        handleCheckedCitiesChange(value) {
            let checkedCount = value.length;
            this.checkAll = checkedCount === this.cities.length;
            this.isIndeterminate = checkedCount > 0 && checkedCount < this.cities.length;
        },
          //展示数据
          init() {
              axios({
                  method: "post",
                  url: "/inquire/queryManagement"
              }).then(res => {
                  console.log(res.data)
                  this.tableData=res.data
              })
          }
      }
    })
  </script>
</html>